<template>
  <view class="my-page">
    <view class="top-bg"></view>
    <view class="my-info-panel">
      <view class="userinfo">
        <image
          class="userinfo-pic"
          src="https://img1.baidu.com/it/u=898692534,2766260827&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1688230800&t=37b2de32b5260b8467dba333e92c49c5"
        ></image>
        <view>
          <view class="userinfo-name">用户名</view>
          <view class="userinfo-account">账号：1231346</view>
        </view>
      </view>
      <image
        class="info-panel-pic"
        mode="widthFix"
        :src="require('@/static/img/info-panel-pic.png')"
      ></image>
    </view>
    <view class="main">
      <view class="desc-title">常用功能</view>
      <view class="main-action">
        <view
          @click="gotoPage(item)"
          v-for="(item, index) in actionTabs"
          :key="index"
          class="main-action-item"
        >
          <image
            class="main-action-item-icon"
            mode="widthFix"
            :src="item.pic"
          ></image>
          <view class="main-action-item-text">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actionTabs: [
        {
          pic: require("@/static/img/my-icon4.png"),
          path: "/pages/my-base/index",
          name: "我的基地",
        },
        {
          pic: require("@/static/img/my-icon.png"),
          name: "账号设置",
        },
        {
          pic: require("@/static/img/my-icon2.png"),
          name: "官方客服",
        },
        {
          pic: require("@/static/img/my-icon3.png"),
          name: "修改密码",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    gotoPage(item) {
      item.path &&
        uni.navigateTo({
          url: item.path,
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-page {
  background: #f6f6f6;
  height: 100vh;
}
.top-bg {
  width: 100%;
  height: 268rpx;
  background: linear-gradient(
    180deg,
    #1ac678 0%,
    #51d499 16%,
    #81e0b5 33%,
    #b7edd5 53%,
    #ffffff 100%
  );
  opacity: 1;
}
.my-info-panel {
  position: relative;
  top: -100rpx;
  width: 690rpx;
  height: 280rpx;
  background: #1ac678;
  opacity: 1;
  margin: 0 auto;
  border-radius: 20rpx;
}
.info-panel-pic {
  position: absolute;
  width: 204rpx;
  bottom: 10rpx;
  right: 10rpx;
}
.userinfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 70rpx 42rpx;
  margin-bottom: 70rpx;
  &-pic {
    width: 140rpx;
    height: 140rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 70rpx;
    margin-right: 46rpx;
  }
  &-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  &-account {
    font-size: 21rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.main {
  padding: 0 30rpx;
  &-action {
    width: 100%;
    height: 329rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 20rpx;
    display: flex;
    // flex-direction: row;
    flex-wrap: wrap;
    padding: 42rpx 0 0;
    &-item {
      width: 33.33%;
      margin-bottom: 35rpx;

      &-icon {
        display: block;
        width: 55rpx;
        margin: 0 auto 14rpx;
      }
      &-text {
        font-size: 26rpx;
        font-weight: bold;
        color: #202020;
        text-align: center;
      }
    }
  }
}
.desc-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1ac678;
  margin-bottom: 53rpx;
}
</style>
